<!DOCTYPE html>
<html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
<!-- 	<head>
		<meta charset="utf-8" />
		<title>武钢有限组织绩效</title>
		<link th:href="@{/css/orgstyle.css}" rel="stylesheet"/>
	</head> -->
<meta charset="utf-8">
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="@{/css/font-awesome.min.css}"/>
<!-- bootstrap-table 表格插件样式 -->
<link rel="stylesheet" th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}"/>
<link rel="stylesheet" th:href="@{/ajax/libs/bootstrap-treetable/bootstrap-treetable.css}"/>
<link rel="stylesheet" th:href="@{/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.css}"/>
<link rel="stylesheet" th:href="@{/css/animate.css}"/>
<link rel="stylesheet" th:href="@{/css/style.css}"/>
<link rel="stylesheet" th:href="@{/ajax/libs/select/select2.css}"/>
<link rel="stylesheet" th:href="@{/ruoyi/css/ry-ui.css}"/>
<link rel="stylesheet" th:href="@{/css/orgstyle.css}"/>


<body class="">
<input id="tableId" name="tableId" th:value="${id}" type="hidden">
<input id="treeId" name="deptId" type="hidden"/>
<div class="nav left">
    <div class="sousuo">
        <input id="orgProgect" name="projectName" placeholder="请输入方案名称" type="text" value=""/>
        <button onclick="selectOrgPro()">搜索</button>
    </div>
    <div class="orglist" id="orglist">
        <h3>方案名称</h3>
        <ul id="orgUl">
            <li th:each="org:${orgList}" th:id="${org.id}" th:name="${org.projectName}"
                th:onclick="'javascript:showPreview(\''+${org.id}+'\',\''+${org.projectName}+'\',this);'">
                <p th:text="${org.projectName}"></p>
            </li>
        </ul>
    </div>
</div>

<div class="content right">

    <div class="tabPanel">
        <div class="nav_test">
            <h3 id="orgDeptProNameKey"></h3>
            <ul id="seUl">
                <!-- <li class="hit">详情</li> -->
                <li class="hit" onclick="showSelect();"><i class="fa fa-exchange"></i>搜索</li>
                <li class="hit" onClick="$('#table').tableExport({ type: 'excel', escape: 'false'})"><i
                        class="glyphicon glyphicon-open"></i>导出
                </li>
            </ul>
        </div>

        <div class="col-sm-12 search-collapse" id="search">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>考核单位：<input id="treeName" name="deptName"
                                        onclick="selectDeptTree()" type="text">
                        </li>
                        <li><input id="treeId" name="deptId" type="hidden"/></li>

                        <li><a class="btn btn-success btn-rounded btn-sm"
                               onclick="selectByDept()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-success btn-rounded btn-sm" onclick="reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a></li>
                    </ul>
                </div>
            </form>


        </div>

        <div class="panes">
            <div class="pane" style="display:block;">
                <div class="pane_mokuai" id="orgDept">
                    <div id="xq">
                        鼠标悬浮显示详情框
                    </div>
                    <table class="table table-striped" id="table">
                        <!--在此处填充表格数据-->
                    </table>

                    <div class="row">
                        <div class="tableArea hidden col-sm-12 m" id="tableDiv2">
                            <h4 class="form-header h4">评分信息</h4>
                            <h3 id="indName" style="color: red;"></h3>
                            <table class="table table-striped" id="bootstrap-table">
                                <!--在此处填充表格数据-->
                            </table>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs/select/select2.js}"></script>
<script th:inline="javascript">

    var prefix = ctx + "zzjx/pefctasstable";
    $(function () {
        $("#seUl").hide();
        $("#search").hide();
    })

    //搜索异步加载
    function selectOrgPro() {
        $.modal.loading('加载中');
        var proname = $("#orgProgect").val().replace(/\s+/g, "");
        $("#orglist").load(prefix + "/orgProList", {
            projectName: proname
        }, function () {
            $.modal.closeLoading();
        });
    }

    //单击绩效计划
    function showPreview(orgId, orgName, that) {
        $.modal.loading('加载中');
        $("#tableId").val(orgId);
        $("#orgDeptProNameKey").html(orgName);
        doChange(null);
        $("#seUl").show();
        $(that).addClass("selected").siblings().removeClass("selected");

    }

    /**
     * 更改模板，重新加载预览信息
     * @returns {boolean}
     */
    function doChange(deptId) {
        var tableId = $("#tableId").val(); //表单id
        if (tableId != "") {
            $.modal.loading("请等待加载预览信息!");
            $.ajax({
                url: ctx + "zzjx/pefctasstable/showPreview"
                , data: {"tableId": tableId, deptId: deptId}
                , dataType: "JSON"
                , type: "GET"
                , async: false
                , success: function (result) {
                    $("#table").html("");
                    var dictData = result.dictData;
                    var list = result.list;
                    buildTable($('#table'), dictData.length, list.length, dictData, list);
                    $.modal.closeLoading();
                }, error: function () {
                    $.modal.closeLoading();
                    $.modal.alertError("获取预览信息失败!");
                }
            })
            $("#tableDiv").removeClass("hidden");
            return false;
        }
        $("#tableDiv").addClass("hidden");
    }


    /**
     * 构建预览信息表格
     * @param $el
     * @param cells
     * @param rows
     * @param dictData
     * @param peftempletindicatorList
     */
    function buildTable($el, cells, rows, dictData, peftempletindicatorList) {
        var i, j, row,
            columns = [],
            data = [];
        columns.push({field: "id", title: "id", visible: false});
        //拼接table,拼接表头
        for (var dd in dictData) {
            var dictLabel = dictData[dd]["dictLabel"];//显示名称
            var dictValue = dictData[dd]["dictValue"];//字段值

            var f = {
                field: dictValue,
                title: dictLabel/* ,
						formatter: function(value, row, index) {
						      return $.table.tooltip(value);
						} */

            }
            /*if(dictValue == "id"){
                f = {
                    field: dictValue,
                    title: dictLabel,
                    visible: false
                }
            }*/
            columns.push(f);
        }

        //拼接数据
        /*for (var i in peftempletindicatorList) {
            row = {};
            for(var dd in dictData){
                var dictValue = dictData[dd]["dictValue"];//字段值
                for(var key in peftempletindicatorList[i]){    //map key 
                    //console.log(key);
                    //console.log(peftempletindicatorList[i][key]);  //map value
                    if(key == dictValue){
                        if (dictValue == "checkcyc"){
                            row[key] = $.table.selectDictLabel([[${@dict.getType('zzjx_pefindicator_checkcyc')}]], peftempletindicatorList[i][key]);
                        }else{
                            row[key] = peftempletindicatorList[i][key];
                        }
                    }
                }
            }
            data.push(row);
        }*/

        $el.bootstrapTable('destroy').bootstrapTable({
            columns: columns,
            data: peftempletindicatorList,
            unique: "id",
            search: false,
            showExport: false,
            height: 700,
            onClickRow: function (row, $element) {
                loadKpxx(row);
            },
            onPostBody: function (data) {
                bding();
                $.modal.closeLoading();
            }
        });
    }

    /**
     * 点击指标加载考评详细
     */
    function loadKpxx(row) {
        var id = row.id;
        $.modal.loading("请等待加载此指标的考评信息!");
        $.ajax({
            url: ctx + "zzjx/assessor/selectAssessorByIndId/" + id
            , dataType: "JSON"
            , type: "GET"
            , async: false
            , success: function (result) {
                $("#bootstrap-table").html("");
                buildTable2(result);
                $.modal.closeLoading();
            }, error: function () {
                $.modal.closeLoading();
                $.modal.alertError("获取考评信息失败!");
            }
        })
        $("#tableDiv2").removeClass("hidden");
        $("#indName").html("&nbsp;&nbsp;&nbsp;&nbsp;" + row.indName);
    }

    function buildTable2(list) {
        var columns = [
            {
                field: 'assessorCode',
                title: '工号'
            },
            {
                field: 'userName',
                title: '姓名'
            },
            {
                field: 'deptName',
                title: '部门'
            },
            {
                field: 'roleName',
                title: '角色名称'
            },
            {
                field: 'percents',
                title: '评分人权重'
            },
            {
                field: 'rolePercents',
                title: '评分角色权重'
            },
            {
                field: 'score',
                title: '评分'
            },
            {
                field: 'comments',
                title: '评语'
            }];
        var row;
        var data = [];
        //拼接数据
        for (var i in list) {
            row = {};
            for (var key in list[i]) {    //map key 
                row[key] = list[i][key];
            }
            data.push(row);
        }

        $("#bootstrap-table").bootstrapTable('destroy').bootstrapTable({
            columns: columns,
            data: data,
            search: false,
            onPostBody: function (data) {
                bding();
                $.modal.closeLoading();
            }
        });
    }

    function selectDeptTree() {
        var deptId = $.common.isEmpty($("#treeId").val()) ? "100" : $("#treeId").val();
        var url = ctx + "system/dept/selectDeptTree/" + deptId;
        var options = {
            title: '选择部门',
            width: "380",
            url: url,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero) {
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        if ($.tree.notAllowParents(tree)) {
            var body = layer.getChildFrame('body', index);
            $("#treeId").val(body.find('#treeId').val());
            $("#treeName").val(body.find('#treeName').val());
            layer.close(index);
        }
    }

    function reset() {
        $("#treeId").val('');
        $("#treeName").val('');
    }

    function selectByDept() {
        var deptId = $("#treeId").val();

        doChange(deptId);

    }

    //表格超出宽度鼠标悬停显示td内容
    function paramsMatter(value, row, index, field) {
        var span = document.createElement('span');
        span.setAttribute('title', value);
        span.innerHTML = value;
        return span.outerHTML;
    }

    //td宽度以及内容超过宽度隐藏
    function formatTableUnit(value, row, index) {
        return {
            css: {
                "white-space": 'nowrap',
                "text-overflow": 'ellipsis',
                "overflow": 'hidden'
            }
        }
    }

    function bding() {
        $("td").mouseover(function (e) {
            var a = $(this).html();
            if (a.indexOf("<input") != -1) {
                a = $(this).find("input").val();
            }
            if (a.length < 7) {
                return;
            }
            $("#xq").html(a);
            $("#xq").css({"position": "absolute", "top": e.pageY + 15, "left": e.pageX - 75}).show();
        });
        $("td").mousemove(function (e) {
            $("#xq").css({
                "position": "absolute",
                "opacity": "0.7",
                "background-color": "666",
                "top": e.pageY + 15,
                "left": e.pageX - 75
            });
        });
        $("td").mouseout(function () {
            $("#xq").hide();
        });
    }

    function selectDeptTree() {
        var deptId = $.common.isEmpty($("#treeId").val()) ? "100" : $("#treeId").val();
        var url = ctx + "system/dept/selectDeptTree/" + deptId;
        var options = {
            title: '选择部门',
            width: "380",
            url: url,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero) {
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        if ($.tree.notAllowParents(tree)) {
            var body = layer.getChildFrame('body', index);
            $("#treeId").val(body.find('#treeId').val());
            $("#treeName").val(body.find('#treeName').val());
            layer.close(index);
        }
    }

    function reset() {
        $("#treeId").val('');
        $("#treeName").val('');
    }

    function selectByDept() {
        var deptId = $("#treeId").val();
        $.modal.loading('加载中');
        doChange(deptId);

    }

    function showSelect() {
        $("#search").toggle()

    }

</script>
</body>
</html>
